<template>
	<view class="">
		<view
			class="item"
			v-for="(item, index) in dataList"
			:key="index"
			@click="goDetail(item)">
			<view
			:style="{ backgroundColor: item.bgColor }"
				class="circle"
			>
				<uni-icons color="#fff" type="mail-open" size="30"></uni-icons>
			</view>
			<view class="content">
				<view class="one">订单:{{ item.sorderNo }},报工数: {{ item.iqty }}</view>
				<view class="one">款号:{{ item.sstyleNo }}</view>
				<view class="two">日期: {{ item.doutputDate }}</view>
				<view class="three">
					{{ item.sprocedureName }}
					颜色：{{ item.scolorName }}
					尺码：{{ item.ssizeName }}
				</view>
			</view>
		</view>

		<uni-load-more :status="status" />
		<uni-fab
			:pattern="pattern"
			horizontal="right"
			@fabClick="trigger()"
		></uni-fab>
	</view>
</template>

<script>
	import rfidOutput from "@/api/report/rfidOutput"
	export default {
		data() {
			return {
				status: 'loadmore',
				dataList: [],
				colors: ['#ffb34b', '#f2bba9', '#f7a196', '#f18080', '#88a867', '#bfbf39', '#89c152', '#94d554', '#f19ec2',
					'#afaae4', '#e1b0df', '#c38cc1', '#72dcdc', '#9acdcb', '#77b1cc', '#448aca', '#86cefa', '#98d1ee',
					'#73d1f1', '#80a7dc', '#83a78d', '#ad9e5f'
				],
				pattern: {
					"buttonColor": "#111"
				},
				tablePage: {
					pages: 0,
					currentPage: 0,
					pageSize: 10
				},
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			uni.$off('refreshData');
			uni.$on('refreshData',() => {
				this.loadAgain();
			});
			setTimeout(() => {
				uni.hideLoading();
			}, 1000);
		},
		onLoad() {
			this.loadmore();
		},
		onReachBottom() {
			this.loadmore();
		},
		methods: {
			// 点击跳转详情页面
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/subB/reportWork/detail?spackBarCode=${item.spackBarCode}&sbillNo=${item.sbillNo}`
				});
			},
			loadmore() {
				if(this.tablePage.currentPage!==0 &&
					 this.tablePage.pages <=
					 this.tablePage.currentPage) {
					this.status = 'nomore';
					return;
				}
				this.tablePage.currentPage = ++ this.tablePage.currentPage;
				//联网加载数据
				this.status = 'loading';
				uni.showLoading({
					title: '加载中'
				});
				rfidOutput.queryOutputDataList({
					current: this.tablePage.currentPage,
					size: this.tablePage.pageSize,
					orders: [{ column: "t.create_time", asc: false }]
				}).then(data => {
					//追加新数据
					data.records.forEach((e) => {
						e["bgColor"] = this.colors[Math.floor(Math.random() * 21)]
					});
					this.dataList = this.dataList.concat(data.records);
					this.tablePage = {
						pages: data.pages,
						currentPage: data.current,
						pageSize: data.size
					};
					if(this.tablePage.pages <= this.tablePage.currentPage){
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			loadAgain() {
				rfidOutput.queryOutputDataList({
					current: 1,
					size: 10,
					orders: [{ column: "t.create_time", asc: false }]
				}).then(data => {
					data.records.forEach((e) => {
						e["bgColor"] = this.colors[Math.floor(Math.random() * 21)]
					});
					this.dataList = data.records;
					this.tablePage = {
						pages: data.pages,
						currentPage: data.current,
						pageSize: data.size
					};
					if(this.tablePage.pages <= this.tablePage.currentPage){
						this.status = 'nomore';
					} else {
						this.status = 'loadmore';
					}
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			trigger() {
				uni.navigateTo({
					url: '/pages/subB/reportWork/detail'
				});
			}
		}
	}
</script>

<style scoped>
.item {
	display: flex;
	height: 70px;
	align-items: center;
	margin: 0 auto;
	margin-top: 10px;
	width: 690rpx;
}
.circle {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-basis: 1;
}
.content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding-left: 10px;
}
.one {
	font-weight: bold;
	font-size: 16px
}
.two {
	font-size: 14px;
	margin: 6rpx 0;
}
.three {
	color: #999;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 500rpx;
}
</style>